<template>
  <div class="flex flex-col h-screen">
    <div class="flex flex-row justify-between items-center px-5 mb-4 w-full">
      <van-search
        placeholder="请输入搜索关键词"
        shape="round"
        class="flex-auto"
        show-action
        @click-input="emits('onClickInput')"
      >
        <template #action>
          <div class="text-yxt-blue" @click="onClickCreate">新建</div>
        </template>
      </van-search>
    </div>

    <emptyView v-if="attendList.length === 0" :des="'暂无数据'" />
    <div v-else class="flex overflow-auto flex-col flex-auto justify-between bg-red-30">
      <div class="overflow-y-auto flex-auto">
        <attendInfoCell
          v-for="(item, index) in attendList"
          :key="index"
          :item="item"
          :attendType="'inner'"
          @onChange="checkStatusOnChange"
        />
      </div>

      <bottomView
        v-if="attendList.length > 0"
        v-model:checked="checkAll"
        @change="onCheckAllStatusChange"
        @onConfirm="onConfirm"
        :count="chooseNum"
      />
    </div>

    <van-popup v-model:show="showCreateView" position="bottom" round>
      <createInnerAttend
        :attendType="'inner'"
        @onCreatAttend="onCreateAttend"
        :customCreate="true"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { computed, ref, defineEmits, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useOrderVisitStore } from "@/store";
import emptyView from "@/components/emptyView.vue";
import attendInfoCell from "./components/attendInfoCell.vue";
import bottomView from "./components/bottomView.vue";
import createInnerAttend from "./createInnerAttend.vue";
import { showToast } from "vant";
import { createInternalAttendAPI } from "@/services/orderVisit";

const store = useOrderVisitStore();
const router = useRouter();
const attendList = computed(() => store.currentListData);
const emits = defineEmits(["onClickInput"]);
const checkAll = ref(false);

onMounted(() => {
  store.getInternalFiledPartnerAction();
});

const internalFiled = computed(() => {
  return store.innerFiledTemple;
});

// 全选框变化
function onCheckAllStatusChange(v) {
  attendList.value.forEach((item) => (item.checked = v));
}

// 单个人员框变化
function checkStatusOnChange(v, item) {
  if (item.name === store.selfInfo.name && !v) {
    item.checked = true;
    showToast("不能删除自己");
    return;
  }

  console.log(store.selfInfo.name, item);

  if (!v) {
    checkAll.value = false;
    // 操作store 保留不要删除，
    // TODO: 数据做一次缓存
    // store.removeListFromAttendList([item])
  }
  updateCheckAllStatus();
}

function updateCheckAllStatus() {
  checkAll.value = attendList.value.length === chooseNum.value;
}

const chooseNum = computed(() => attendList.value.filter((v) => v.checked).length || 0);

function onConfirm() {
  router.back();
}

const name = ref("");
const positionName = ref("");
const showCreateView = ref(false);
function onClickCreate() {
  showCreateView.value = true;
}

async function onCreateAttend(v) {
  const { name, formData } = v;
  let parameter = {
    name,
    fieldValues: formData.fieldValues,
  };

  console.log("onCreateAttend: ", parameter);

  const data = await createInternalAttendAPI(parameter);

  let attend = {
    participantType: "EXTERNAL_PARTNER",
    name,
    partnerId: data.id,
    formData: data.formData,
  };

  updateCheckAllStatus();
  store.addInnerAttendList([attend]);
  showCreateView.value = false;
}
</script>

<style lang="less" scoped></style>
